<script setup lang="ts">
    import { computed, watch } from 'vue';
    import { userSessionStore } from '@/stores/session';
    import { useChatStore } from '@/stores/chat';

    import renderReplyContent from '@/utils/renderReplyContent';
    import moment from 'moment';
import { TextBody } from '@/services/type';

    const sessionStore = userSessionStore();
    const chatStore = useChatStore();

    // 会话列表
    const sessionList = computed(() => 
        sessionStore.sessionList.map((item) => {
            // 最后一条消息内容
            const lastMsg = chatStore.messageMap.get(item.session_id);
            let LastUserMsg = '';
            let activeTime = null;
            if (lastMsg) {
                LastUserMsg = renderReplyContent(
                    lastMsg.message.type, 
                    (lastMsg.message.body as TextBody).content
                );
                activeTime = lastMsg.message.sendTime;
            }
            return {
                ...item,
                text: LastUserMsg || item.text,
                active_time: activeTime || item?.active_time,
            }
        })
    );

    const isShowChatBox = computed(() => chatStore.isShowChatBox);

    watch(isShowChatBox, (data) => {
        if(data) {
            // 初始化参数
            sessionStore.initParam();
            // 获取会话列表
            sessionStore.getSessionList();
        }
    });

    // 切换会话
    const switchSession = (session_id: number) => {
        console.log("就开了");
        sessionStore.currentSession.session_id = session_id;
    }
    
</script>
<template>
    <div class="loading" v-if="sessionStore.isLoading">
        <el-icon class="is-loading"><Loading /></el-icon>
    </div>
    <transition-group name="chat-list" tag="ul">
        <li 
            v-for="(item, index) in sessionList" 
            :key="index" 
            :class="{ 'chat-item': true, 'active': sessionStore.currentSession.session_id === item.session_id }" 
            @click="switchSession(item.session_id)"
        >
            <div class="user-icon"><img :src="item.target_user_info?.avatar"/></div>
            <div class="chat-main">
                <div class="chat-main-on">
                    <span class="name">{{ item.target_user_info?.nickName }}</span>
                    <span class="time">{{ moment(item.active_time).startOf('minute').fromNow() }}</span>
                </div>
                <div class="chat-main-down">
                    <span class="content" v-html="item.text"></span>
                    <span class="unread" v-if="item.unread_count > 0">{{ item.unread_count }}</span>
                    <!-- <span class="unread">1</span> -->
                </div>
            </div>
        </li>
    </transition-group>
</template>
<style lang="less" scoped>
    .loading {
        text-align: center;
    }
    ul {
        & .chat-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 5px 0;
            & .user-icon {
                float: left;
                margin: 10px;
                width: 40px;
                height: 40px;
                & img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            & .chat-main {
                flex: 1;
                margin-top: 4px;
                & .chat-main-on {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    & .name {
                        font-size: 13px;
                        color: #333;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    & .time {
                        font-size: 13px;
                        margin-right: 10px;
                        color: #999;
                    }
                }
                & .chat-main-down {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    & .content {
                        position: relative;
                        font-size: 13px;
                        line-height: 24px;
                        color: #999;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        width: 160px;
                        height: 24px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin: 0;
                    }
                    & .unread {
                        position: relative;
                        float: right;
                        right: 10px;
                        height: 14px;
                        min-width: 14px;
                        padding: 0 4px;
                        line-height: 14px;
                        font-size: 10px;
                        border-radius: 9px;
                        background: #ff5c64;
                        color: #fff;
                        text-align: center;
                        -webkit-user-select:none;
                        -moz-user-select:none;
                        -ms-user-select:none;
                        user-select:none;
                    }
                }
            }
        }
        & .chat-item.active, .chat-item:hover {
            background: rgba(37,38,50,.08);
        }
    }
</style>